<!DOCTYPE html>
<html>
  <head>
    <title>弹窗实验.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
    	.login{
    		/* width:300px;
    		height:300px; */
    		border:1px solid #000;
    		position:absolute;
    	}
    	.title{
    		height:30px;
    		line-height:30px;
    		position:relative;
    		padding-left:10px;
    		background:#CCC;
    	}
    	.close{
    		position:absolute;
    		width:60px;
    		height:30px;
    		margin-top: 250px;
			margin-left: 85px;
			background-color: rgb(79, 79, 200);
			border-radius: 13px;
    		cursor:pointer;
			
    	}
		.close p{
			font-size: 15px;
			color: white;
			text-align: center;
			line-height: 30px;
			margin-top: -1px;
		}

		.s_img{
			position:absolute;
			width: 100%;
			height: 100px;
			margin-top: 40px;
			margin-left: -20px;
		}
		
    </style>
    <script type="text/javascript">
		window.onload=function(){
			var aInput=document.getElementsByTagName('input');
			aInput[0].onclick=function(){
				var d1=new Drag();
				d1.init({
					title : '支付'
				});
			}
		}
		function Drag(){
			this.span = null;
			this.obj=null;

			this.settings = {//默认参数
				w : 300,
				h : 300,
				dir : 'center'

			};
		}
		Drag.prototype.init=function(opt){//初始化

			extend(this.settings,opt)

			this.create();
			this.setData();
			this.fnClose();
		}
		Drag.prototype.create=function(){//创建元素
			this.obj=document.createElement('div');
			this.obj.className='login';
			this.obj.innerHTML='<div class="title"><span>'+this.settings.title+'</span><span class="close"><p>支付</p></span><span class = "s_img"><img src="/images/下载10.jpg" width="250px" height="200px"></span></div>';
    	    document.body.appendChild(this.obj);
		}

		Drag.prototype.setData = function(){//属性
			this.obj.style.width = this.settings.w +'px';
			this.obj.style.height = this.settings.h +'px';

			this.obj.style.left = (viewWidth() - this.obj.offsetWidth)/2 +'px';
			this.obj.style.top = (viewHeight() - this.obj.offsetHeight)/2 +'px';
		}

		Drag.prototype.fnClose = function(){//关闭按钮
			var This = this;
			this.span = this.obj.getElementsByTagName('span')[1];
			this.span.onclick = function(){
				document.body.removeChild(This.obj);
				alert("已支付");
			}
		}

		function extend(obj1,obj2){//对象的复制
			for(var attr in obj2){
				obj1[attr]=obj2[attr];
			}
		}

		function viewWidth(){
			return document.documentElement.clientWidth;
		}

		function viewHeight(){
			return document.documentElement.clientHeight;
		}

	</script>
  </head>
  
  <body>
    <input type="button" value="登录">
   <!-- 
     <div class="login">
    	<div class="title">
    		<span>标题</span>
    		<span class="close">X</span>
    	</div>
    </div> 
     -->
  </body>
</html>